<template>
    <el-dialog 
    class="guid-dialog tip-dialog" 
    :class="{'show-box':activeIndex>-1}"

    :close-on-click-modal="false" title="办事指南" @close="onClose" :visible.sync="dialogVisible" height="440px" width="600px">
        <div class="search-row">
            <input maxlength="50" v-model="keyword" placeholder="请输入办理事项名称" class="search-input" type="text">
            <button @click="reset" class="reset-btn">重置</button>
            <button @click="search" class="search-btn">
                <img src="../../assets/search.png" alt="">
            </button>
        </div>
        <ul class="search-ul">
            <li v-for="(item,index) in list" :key="index" @click="onClick(index)" v-bind:class="{'active':index === activeIndex}" class="search-list">
                <div class="triangle"></div>
                <div class="phone">
                    <span class="target">◆</span>
                </div>
                <div class="flex1">{{item.title}}</div>
            </li>
            <div v-if="!list.length" class="no-data">
                <img src="../../assets/no-data.png" alt="">
            </div>
        </ul>
        <div class="pager" v-if="list.length>0">
            <el-pagination background @current-change="handleCurrentChange" :current-page="currentPageNum" :page-size="5" prev-text="上一页" next-text="下一页" layout="total, prev, pager, next" :total="total"></el-pagination>
        </div>
        <div v-if="activeIndex>-1" class="detail">
            <div class="title-row">办事指南</div>
            <div class="c-content" v-html="currentItem.content"></div>
        </div>
    </el-dialog>
</template>

<script>
import Pubsub from "../../utils/pubsub";
import { tyGetGuideList } from "../../config/api";
export default {
    data() {
        return {
            dialogVisible: false,
            activeIndex: -1, //当前选中的下标
            list: [], //办事指南列表
            currentItem: {}, //当前选中的项
            keyword: "",
            total: 0,
            currentPageNum: 1
        };
    },
    mounted() {
        this.pubsub_token = Pubsub.subscribe(
            "showGuidDialog",
            (type, arg = {}) => {
                this.keyword = "";
                this.dialogVisible = true;
                if (arg.item) {
                    this.list.push(arg.item);
                    this.activeIndex = 0;
                    this.currentItem = arg.item;
                    this.total = 1;
                } else {
                    this.search();
                }
            }
        );
    },
    destroyed() {
        this.pubsub_token && Pubsub.unsubscribe(this.pubsub_token);
    },
    methods: {
        onClick(index) {
            this.activeIndex = index;
            this.currentItem = this.list[index];
        },
        /**
         * 关闭弹窗回调
         */
        onClose() {
            this.list = [];
            this.activeIndex = -1;
            this.currentItem = {};
        },
        /**
         * 重置
         */
        reset() {
            this.keyword = "";
            this.search({});
        },
        /**
         * 查询
         */
        search(req) {
            let defaultRequest = {
                pageNum: 1,
                pageSize: 5,
                title: this.keyword
            };
            let request = Object.assign(defaultRequest, req);
            tyGetGuideList(request).then((result = {}) => {
                this.activeIndex = -1;
                this.currentItem = {};
                this.currentPageNum = request.pageNum;
                this.list = result.rows || [];
                this.total = result.total || 0;
            });
        },
        /**
         * 分页
         */
        handleCurrentChange(e) {
            this.activeIndex = -1;
            this.currentItem = {};
            this.currentPageNum = e;
            this.search({ pageNum: e });
        }
    }
};
</script>

<style lang = "scss" scoped>
.tip-dialog {
  /* position: relative; */
  /* left:30%; */
  transition: all 0.3s ease-in-out;
}
.show-box {
  padding-left: 410px;
}
.guid-dialog {
    /* padding-left: 30%; */
}
.search-ul {
    height: 291px;
    overflow: auto;
}
.search-list {
    background: #eee;
    height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 20px;
    box-sizing: border-box;
    color: #000;
    cursor: pointer;
    .target {
        margin-right: 10px;
    }
    .triangle {
        position: absolute;
        display: none;
        left: -28px;
        height: 0;
        width: 0;
        border-top: 24px solid transparent;
        border-bottom: 24px solid transparent;
        border-left: 28px solid #fff;
        /* box-shadow: 0.5px 0.9px 2px 0px rgba(153, 153, 153, 0.48); */
        z-index: 9;
    }
    /* &::before {
        position: absolute;
        content: "";
        display: block;
        left: -55px;
        height: 28px;
        width: 28px;
        background-color: transparent;
        box-shadow: 0.5px 0.9px 2px 0px rgba(153, 153, 153, 0.48);
        transform: rotate(45deg);
    } */
    &.active {
        background: #1a36a9;
        color: #fff;
        .triangle {
            display: block;
        }
    }
    .phone {
        /* flex: 0.7; */
    }
}
.detail {
    position: absolute;
    left: -425px;
    background: #fff;
    top: 15px;
    width: 410px;
    height: 415px;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 99999;
    .title-row {
        height: 34px;
        line-height: 34px;
        background: #1a36a9;
        color: #fff;
        padding-left: 15px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .c-content {
        flex: 1;
        overflow: auto;
        padding: 20px;
    }
}
.search-row {
    display: flex;
    position: relative;
    margin-bottom: 25px;
    .reset-btn {
        position: absolute;
        right: 60px;
        top: 12px;
    }
}
.search-input {
    flex: 1;
    box-sizing: border-box;
    height: 40px;
    background-color: #fcfcfc;
    border: solid 1px #dcdcdc;
    padding-left: 15px;
    font-size: 14px;
    padding-right: 60px;
}
.search-btn {
    background: #822424;
    padding: 0 10px;
    img {
        height: 24px;
        width: 24px;
    }
}
</style>